<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/userTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head">
        <link rel="stylesheet" href="../../res/css/jquery-ui.css" />
        <script src="../../res/js/jquery-1.10.2.min.js"></script>
        <script src="../../res/js/jquery-ui-1.10.0.custom.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".c1").datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
    </ui:define>
    <ui:define name="content1">
        <f:view>
            <div class="col-6 col-lg-6 col-sm-6">
                <h:form >
                    <div class="form-group">
                        <div class="col-2">Full name</div>
                        <div class="input-group ">
                            <span class="input-group-addon">@</span>
                            <!--<input type="text" class="form-control" placeholder="Full name" />-->
                            <h:inputText value="#{registerBean.currAcc.fullName}" styleClass="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-2">User name</div>
                        <div class="input-group ">
                            <span class="input-group-addon">@</span>
                            <!--<input type="text" class="form-control" placeholder="Full name" />-->
                            <h:inputText value="#{registerBean.currAcc.userName}" styleClass="form-control"/>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-2">Birthday</div>
                        <div class="input-group ">
                            <span class="input-group-addon">@</span>
                            <h:inputText value="#{registerBean.currAcc.birthday}" class="form-control c1 pl" alt="Birthday dd-mm-yyyy">
                                <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
                            </h:inputText>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-2">Address</div>
                        <div class="input-group ">
                            <span class="input-group-addon">@</span>
                            <h:inputText value="#{registerBean.currAcc.address}" styleClass="form-control"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-2">Email</div>
                        <div class="input-group ">
                            <span class="input-group-addon">@</span>
                            <h:inputText value="#{registerBean.currAcc.email}" styleClass="form-control"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-2">Gender</div>
                        <div class="input-group ">
                            <h:selectOneMenu value="#{registerBean.currAcc.gender}" styleClass="form-control">
                                <f:selectItems value="#{genders.all}" var="g" itemLabel="#{g.dispayString}" itemValue="#{g.value}"                                           />
                            </h:selectOneMenu>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-2">Role</div>
                        <div class="input-group ">
                            <h:selectOneMenu value="#{registerBean.roleID}" styleClass="form-control" >
                                <f:selectItems value="#{role.allRole}" var="g" itemLabel="#{g.dispayString}" 
                                               itemValue="#{g.value}"                                           />
                            </h:selectOneMenu>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="">
                            <h:commandButton value="Register" action="#{registerBean.doregister}" styleClass="btn btn-default"></h:commandButton>
                            <input type="reset" class="btn btn-default" value="Reset" />
                        </div>
                    </div>
                </h:form>
            </div>

        </f:view>

    </ui:define>

</ui:composition>
